<template>
  <div class="star-goodsList flex-col items-center">
    <div class="item flex-row bg-white" v-for="(item, index) in goodsList" :key="`goods${index}`" @tap="$goGoodsDeail({ id: item.id })">
      <div class="left justify-center items-center">
        <img :src="item.coverUrl" alt="" class="img" mode="widthFix" >
      </div>
      <div class="right flex-col justify-center">
        <div class="title ellipsis_1">{{item.name}} </div>
        <div class="text">
          {{item.tip}}
        </div>
        <!-- <div class="btns flex-row" v-if="true">
          <img src="../../../assets/common/star-1.png" alt="" class="btn">
          <img src="../../../assets/common/star-2.png" alt="" class="btn btn2">
        </div> -->
        <scroll-view class="tips scroll-content" :scroll-x="true">
          <span class="tips-item" v-for="(tag, idx) in item.tags" :key="`tag${idx}`">{{tag}}</span>
        </scroll-view>
      </div>
      <!-- <radio value="true" :checked="item.checked"></radio> -->
    </div>
    <NoData v-if="goodsList.length === 0"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        goodsList: [],
        data: {
          page: 1,
          size: 10,
          finish: false
        },
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        const params = {
          type: 1,
          pageNumber: this.data.page,
          pageSize: this.data.size
        }
        this.$http.request({
          url: '/user/myCollectionList.json',
          data: params
        }).then(({ data: { goodsInfoDTOList } }) => {
          this.$taro.stopPullDownRefresh()
          const goodsList = goodsInfoDTOList.map(item => {
            let tags = []
            if (item.labelsString) {
              tags = item.labelsString.includes(';') ? item.labelsString.split(';') : [item.labelsString]
            } else if (item.tip) {
              tags = item.tip.includes(' ') ? item.tip.split(' ') : [item.tip]
            }
            return {
              ...item,
              tags,
            }
          })
          this.goodsList.push(...goodsList)
          if (goodsInfoDTOList.length < this.data.size) {
            this.data.finish = true
          } else {
            this.data.finish = false
          }
        })
      },
      resetData() {
        this.data.page = 1
        this.data.finish = false
        this.getData()
      },
      getMoreData() {
        if (this.data.finish) {
          return
        }
        this.data.page += 1
        this.getData()
      },
    }
  }
</script>
<style lang="scss">
  .star-goodsList {
    padding: 0 10px;
    width: 100%;
    .item {
      width: 356px;
      height: 103px;
      border-radius: 6px;
      margin-top: 8px;
      .left {
        width: 125px;
        height: 93px;
        background-color: #F9F9F9;
        .img {
          max-width: 125px;
          height: 80px;
        }
      }
      .right {
        padding: 15px;
        .title {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 23px;
          color: #232323;
          max-width: 200px;
        }
        .text {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #9E9E9E;
          margin-top: 4px;
        }
        .tips {
          display: flex;
          margin-top: 9px;
          .tips-item {
            border: 1px solid #FFB100;
            border-radius: 2px;
            padding: 0 10px;
            height: 18px;
            line-height: 19px;
            font-size: 10px;
            color: #FFB100;
            margin-right: 8px;
            display: inline-block;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        // .btns {
        //   margin-top: 6px;
        //   .btn {
        //     width: 76px;
        //     height: 25px;
        //   }
        //   .btn2 {
        //     margin-left: 7px;
        //   }
        // }
      }
    }
  }
</style>
